<!DOCTYPE html>
<html>
	{include file="head.html"}
	<link href="/plugin/skyweb/skyweb.css" rel="stylesheet" type="text/css" />
	<link href="/plugin/uicompent/uicompent.css" rel="stylesheet" >
	<body>
		<div class="tophd">
			组件编辑
			<div class="back goBack">返回</div>
			<div class="refresh js-refresh">刷新</div>
		</div>
		<div class="main-body">
			<form id="form" action="/admin.php?m=diy_uicompent&a=editsave">
				<input type="hidden" name="id" value="{$data.id}" />
				<input type="hidden" name="ucid" value="{$data.ucid}" />
				<table class="table table-add">
					<tr>
						<td width="100">名称</td>
						<td>
							<input type="text" name="title" value="{$data.title}" />
						</td>
					</tr>
					<tr>
						<td>标签</td>
						<td>
							<input readonly="" type="text" name="tag" value="{$data.tag}" />
						</td>
					</tr>
					
					<tr>
						<td>数据接口</td>
						<td>
							 
							{foreach item=c key=k from=$jsondata}
							{if $k eq 'title'}
							<div class="c-item" >标题：<input type="text" name="jsondata[{$k}]" value="{$c}" /> (为空不显示)</div>
							{elseif $k eq 'more'}
							<div class="c-item">更多:<input type="text" name="jsondata[{$k}]"  value="{$c}" /> (为空不显示)</div>
							{elseif $k eq 'skins'}
							<div class="c-item">
								风格：<input type="text" name="jsondata[{$k}]" value="{$c}" />
								
							</div>
							{elseif $k eq 'img'}
							<div class="js-upload-item" style="position: relative;">
								<input type="hidden" class="js-imgurl" name="jsondata[{$k}]"  value="{$c}">
								<div style="display: none;">
									<input type="file" id="file-{$k}" class="js-upload-file"  />
								</div>
								
								<div class="imbox js-imgbox">
									<div class="imbox-bt js-upload-btn">+</div>
									{if $c}
									<img class="imbox-img" src="{$c|images_site}">
									{/if}
								</div>
							</div>
							{elseif $k eq 'catid'}							
							<div class="c-item" >分类：<input type="text" name="jsondata[{$k}]" value="{$c}" /></div>							
							{elseif $k eq 'limit'}
							<div class="c-item">行数：<input type="text" name="jsondata[{$k}]" value="{$c}" /></div>
							{elseif $k eq 'funkey'}
							<div class="c-item">
							数据：
							<select name="jsondata[{$k}]" class="text">
								{foreach item=fval key=fkey from=$funlist}
								<option value="{$fkey}" {if $c eq $fkey} selected {/if}>{$fval}</option>
								{/foreach}
							</select>
							</div>
							{elseif $k eq 'note'}
							<div class="c-item">
								提示：
								<div class="note">{$c}</div>
							</div>	
							{/if}
							{/foreach}
						</td>
					</tr>
					
					<tr>
						<td></td>
						<td>
							<div class="btn btn-success js-submit">保存</div>
							<div class="btn btn-default js-view">预览</div>
						</td>
					</tr>
				</table>
				 
				
			</form>
		
		</div>
	<script>
		/*文件上传*/
function skyUpload(upid,url,success,error,uploadProgress)
{
		 var vFD = new FormData();
		 var f= document.getElementById(upid).files;
		 $("#"+upid+"loading").show();
		 for(var i=0;i<f.length;i++){ 
		vFD.append('upimg', document.getElementById(upid).files[i]);
		// create XMLHttpRequest object, adding few event listeners, and POSTing our data
		var oXHR = new XMLHttpRequest();        
		oXHR.addEventListener('load', success, false);
		oXHR.addEventListener('error', error, false);
		if(uploadProgress!=undefined){
			oXHR.upload.addEventListener("progress", uploadProgress, false);
		}
		oXHR.open('POST',url);
		oXHR.send(vFD);
	
		 }
}
 
$(function(){
	$(document).on("click",".js-upload-btn",function(){
			var p=$(this).parents(".js-upload-item");
			p.find(".js-upload-file").click();
		});
		
		$(document).on("change",".js-upload-file",function(){
			var p=$(this).parents(".js-upload-item");
			var id=$(this).attr("id");
			skyUpload(id,"/index.php?m=upload&a=uploadTao",function(e){
				var data=eval("("+e.target.responseText+")");
				if(data.error==0){
					var html='<img class="imbox-img" src="'+data.trueimgurl+'">';
					p.find(".js-imgbox").html(html);
					p.find(".js-imgurl").val(data.trueimgurl);
				}
			})
		})
	 
		$(document).on("click",".js-view",function(){
			$.post("/admin.php?m=diy_uicompent&a=viewData&ajax=1",$("#form").serialize(),function(data){
				showbox("组件预览",data,520,320);
			})
						
		})
	 
})

	</script>
	<style>
		.note{
			display: inline-block;
			color: #F13A3A;
		}
		.c-item{
			margin-bottom: 5px;
		}
		.c-item .text{
			width: 400px;
		}
		.imbox{
			position: relative;
			width: 100px;
			 
			overflow: hidden;
			margin-bottom: 5px;
		}
		.imbox-img{
			width: 100%;
			min-width: 50px;
			min-height: 50px;
		}
		.imbox-bt{
			position: absolute;
			left: 30px;
			 
			top:30px;
			font-size: 30px; 
			cursor: pointer;
			text-align: center;
			line-height: 50px;
			height: 50px;
			width: 50px;
			opacity: 0.6;
			z-index: 99;
			background-color: #eee;
			 
		}
	</style>	
	</body>
</html>
